<template>
    <div class="ac-product" @click="productDetail">
        <img mode="scaleToFill" :src="product.imageUrl" alt="">
        <text>{{product.itemName}}</text>
    </div>
</template>

<script>
  export default {
    name: "ac-product",
    props: ['product', 'ownerAda'],
    methods: {
      productDetail() {
        Megalo.navigateToMiniProgram({
          appId: 'wxf780a3b16440eb52',
          path: `/pages/pdt-detail/pdt-detail?code=${this.product.itemNumber}&utm_source=AmwayCardMini&utm_medium=homepage&utm_term=${this.ownerAda}&abonumber=${this.ownerAda}&shareNumber=${this.ownerAda}`
        })
      }
    }
  }
</script>

<style scoped lang="less">
    .ac-product {
        width: 208px;
        margin-bottom: 30px;
        min-height: 306px;
        img {
            display: block;
            width: 208px;
            height: 208px;
            background-color: #eee;
        }

        text {
            margin-top: 14px;
            font-size: 30px;
            color: rgba(0, 0, 0, 1);
            display: block;
            max-height: 84px;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
    }
</style>
